<template>
  <canvas id="canvas"></canvas>
</template>

<script>
import { defineComponent, onMounted } from "vue"
import { pageMap } from "./../../../../utils/pagemap"

export default defineComponent({
  name: "canvas-map",
  setup() {
    const handleCanvasMap = () => {
      pageMap(document.querySelector("#canvas"), {
        viewport: document.querySelector("#screens"),
        interval: 50,
        styles: {
          "#comps-map": "#0e2b43",
          "#comps-map div": "#1e88e5",
          '#canvas-comps': 'transparent'
        },
        back: "#4b4b4b",
      });
    }
    onMounted(() => {
      handleCanvasMap();
    })
    return {
      handleCanvasMap,
    }
  }
})
</script>

<style lang="less" scoped>
#canvas {
  position: absolute;
  bottom: 44px;
  right: 10px;
  width: 176px;
  height: 102px;
  cursor: pointer;
  background: #00adff;
  transform-origin: 0 0;

  .center_editor-content {
    height: 100%;
  }
}
</style>